﻿    @{
        RoadFlow.Business.Dictionary bdict = new RoadFlow.Business.Dictionary();
        var icotypes = bdict.GetChilds("system_fontawesome");
    }
    <style type="text/css">
        .fileItem1 { text-align: center; float: left; display: inline-block; margin: 5px 7px 5px 7px; cursor: pointer; width: 93px; height: 40px; overflow: hidden; }
            .fileItem1 span { line-height: 25px; padding: 2px 2px 2px 2px; -moz-user-select: none; color: #555; }
        .fileItem2 { text-align: center; }
            .fileItem2 span { background: #ccc; padding: 2px 2px 2px 2px; color: #fff; }
        .fontItem1 { }
            .fontItem1 span { color: #333; }
        .fontItem2 { text-align: left; }
            .fontItem2 span { background: #3499f0; padding: 2px 2px 2px 2px; color: #fff; }
            .fontItem2 i { color: red; }
    </style>
    <div id="tabdiv">
        <div id="div_font" title="字体图标">
            <div style="height:374px;overflow:auto; padding:10px;">
                <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
                    <tr>
                        <td>
                            @foreach (var type in icotypes)
                            {
                                var icons = bdict.GetChilds(type.Id).OrderBy(p => p.Title).ToList();
                                <div>
                                    <div style="font-size:14px; font-weight:bold; margin-top:6px;">@type.Title</div>
                                    <div style="border:0px solid #ccc; padding-top:6px; overflow:auto; width:100%; text-align:center;">
                                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                            @for (int j = 0; j < icons.Count; j++)
                                            {
                                                <tr style="">
                                                    @for (int i = 0; i < 4; i++)
                                                    {
                                                        j++;
                                                        if (j >= icons.Count)
                                                        {
                                                            if (i > 0)
                                                            {
                                                                for (int m = 0; m < 4 - i; m++)
                                                                {
                                                                    <td style='width:20%;'></td>
                                                                }
                                                            }
                                                            break;
                                                        }
                                                        var icon = icons[j];

                                                        <td style="text-align:left; width:20%; height:26px; overflow:hidden;">
                                                            <div class="fontItem1" data-type="icon" style="cursor:pointer;" onclick="$('[data-type=\'icon\']',$('#div_font')).removeClass('fontItem2');$(this).addClass('fontItem2');curSelectName='@icon.Title';curSelectPath='@icon.Title';curType=1;">
                                                                <i class="fa @icon.Title" style="font-size:20px; margin-right:4px;"></i>
                                                                <span>@icon.Title</span>
                                                            </div>
                                                        </td>
                                                    }
                                                </tr>
                                            }
                                        </table>
                                    </div>
                                </div>
                            }
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="div_img" title="图片图标">
            <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
                <tr>
                    <td>
                        <div id="selectList" style="padding-top:6px; overflow:auto; height: 388px; width:100%; text-align:center;"></div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="buttondiv">
        <input type="button" id="btnOK" onclick="OK_Click();" value=" 确 定 " class="mybutton" />
        <input type="button" id="btnCancel" onclick="new RoadUI.Window().close();" value=" 取 消 " class="mybutton" />
    </div>
    <script type="text/javascript">
    var path = '@ViewData["source"]';
    var id = '@ViewData["id"]';
    var curSelectName = '';
    var curSelectPath = '';
    var curType = 0;
    var icoTree = null;
    $(function ()
    {
        new RoadUI.Tab({ id: "tabdiv", replace: true, contextmenu: false, dblclickclose: false });
        getFiles(path);
    });
    function OK_Click()
    {
        var win = new RoadUI.Window();
        var ele = win.getOpenerElement(id);
        if (ele != null && ele.size() > 0)
        {
            $(ele).val(curSelectPath);
            if (1 == curType)
            {
                $(ele).css({ "padding-left": "3px", "background-image": "" });
                //$(ele).text('<i class="fa ' + curSelectPath + '"></i>');
                //$(ele).before();
            }
            else
            {
                //$(ele).css({ "background-image": "url(" + RoadUI.Core.rooturl() + curSelectPath + ")", "padding-left": "23px" });
            }
        }
        win.close();
    }

    function getFiles(folderValue)
    {
        $.ajax({
            type: "get", url: "SelectIco_File?path=" + folderValue, dataType: "xml", async: true, cache: false,
            success: function (xml) { showFiles(xml); }
        });
    }
    var showFiles = function (xmlDom)
    {
        $element = $("#selectList");
        $element.children().remove();
        if (xmlDom == null || xmlDom.documentElement.childNodes.length == 0)
        {
            return;
        }
        nodeList = xmlDom.documentElement.childNodes;
        for (var i = 0; i < nodeList.length; i++)
        {
            var title = getNodeAtt(nodeList[i], "title");
            var path = getNodeAtt(nodeList[i], "path");
            var path1 = getNodeAtt(nodeList[i], "path1");
            if (path == "") { continue; }

            var html = '<div class="fileItem1" title="' + title + '"'
            + ' onclick="$(\'#selectList\').children().removeClass(\'fileItem2\');$(this).addClass(\'fileItem2\');curSelectName=\'' + title + '\';curSelectPath=\'' + path1 + '\';" '
            + ' ondblclick="OK_Click();" '
            + '><img src="' + path + '" border="0" /><br/><span onselectstart="return false" >' + title + '</span></div>';
            $element.append(html);
        }
    }
    var getNodeAtt = function (node, att)
    {
        try { return $.trim(node.attributes.getNamedItem(att).nodeValue); } catch (e) { return ''; }
    }
    </script>

